<html>
        <head>
            <title>000</title>
            <meta charset="utf-8">
            <style>
                a:link, a:visited, a:hover, a:active{
                    color: #2C58E7;
                    text-decoration: none;
                }
                html, body{
                    width: 100%;
                    height: 100%;
                    margin: 0;
                    padding: 0;
                }
                #container{
                    position: relative;
                    margin: 0 auto;
                    top: 50%;
                    transform: translateY(-50%);

                    width: 800px;
                    height: 500px;
                    background-color: #ccc;
                    border: 1px solid black;
                }

				#candle{
					width: 40px;
					height: 200px;
					position: absolute;
					margin: auto;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					border-radius: 50% 50% / 0 0 10px 10px;
					background-color: red;
					background-image: linear-gradient(90deg, red 0%, rgb(250, 95, 23) 50%,  red 100%);
				}

				#candle::after{
					content: "";
					display: block;
					width: 40px;
					height: 20px;
					position: relative;
                    transform: translateY(-50%);
					border-radius: 50% 50% / 10px 10px;

					background-color: red;
				}

				#candle::before{
					content: "";
					display: block;
					width: 7px;
					height: 30px;
					position: absolute;
					margin: auto;
					left: 0;
					right: 0;
					top: -30px;
					z-index: 9999999;

					background-image: linear-gradient(rgba(134, 128, 36, 0.984) 10%, rgba(219, 217, 65, 0.96) 100%);
					border-radius: 50% 50% 40% 40% / 20px 20px 2px 2px;
					transform: rotateZ(-3deg);
					transform-origin: 50% 100%;
				}

				#flame{
					width: 20px;
					height: 60px;
					position: absolute;
					left: calc(50% - 10px);
					top: -70px;
					z-index: 9999;
					border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;

					background-color: #ffc;
					box-shadow: 0 -10px 5px 5px #fff;
					transform-origin: 50% 100%;

					animation: flame 3s linear infinite;
				}
				#flame::after{
					content: "";
					position: absolute;
					width: 60%;
					height: 60%;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
					border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;

					box-shadow: 0 -30px 25px 30px #ffc inset;
					transform-origin: 50% 100%;
				}
				#flame::before{
					content: "";
					position: absolute;
					width: 80%;
					height: 80%;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
					border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;

					background-color: #ffc;

					box-shadow: 0 20px 15px 20px #fff inset;
					transform-origin: 50% 100%;
				}

				@keyframes flame{
					0%{
						transform: rotateZ(0deg) scale(1,1);
					}
					10%{
						transform: rotateZ(4deg) scale(1,1.1);
					}
					30%{
						transform: rotateZ(-2deg) scale(0.9,0.9);
					}
					60%{
						transform: rotateZ(0deg) scale(0.8,1);
					}
					80%{
						transform: rotateZ(-4deg) scale(0.9,1.1);
					}
					90%{
						transform: rotateZ(2deg) scale(1,1.2);
					}
					100%{
						transform: rotateZ(0deg) scale(1,1);
					}
				}
				@keyframes flamea{
					0%{
						transform: rotateZ(0deg);
						height: 60%;
					}
					10%{
						transform: rotateZ(4deg);
						height: 50%;
					}
					30%{
						transform: rotateZ(-2deg);
						height: 50%;
					}
					60%{
						transform: rotateZ(0deg);
						height: 60%;
					}
					80%{
						transform: rotateZ(-4deg);
						height: 70%;
					}
					90%{
						transform: rotateZ(2deg);
						height: 70%;
					}
					100%{
						transform: rotateZ(0deg);
						height: 60%;
					}
				}
            </style>
        </head>
    
        <body>
            <div id="container">
					https://codepen.io/chris22smith/pen/XXdzzy
				<div id="candle">
						<div id="flame"></div>
				</div>
            </div>
        </body>
    </html>